<template>
	<view class="container">
		<!-- <view class="top">标题</view> -->
		<view class="middle">
			<view class="list">
				<view class="item" v-for="(item,index) in movie_list" :key="index" @click="navTo(`/pages/index/detail?id=${item.id}`)">
					<view class="icon">
						<image :src="item.thumbnail | urlFormat(98,100)" mode="aspectFit"></image>
					</view>
					<view class="text">
						<text class="no">No.{{ item.numb}}</text>
						<text>{{ item.name }}</text>
						<text>{{ item.type }}</text>
						<text class="desc">{{ item.desn }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottom">按钮</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				movie_list:[],
				page:{
					page: 1,
					size: 20,
					more: true,
					load: true,
				}
			}
		},
		onLoad() {
			this.init();
		},
		onShow() {
			
		},
		onPullDownRefresh() { 
			// console.log('下拉');
			this.init();
		},
		onReachBottom() {
			// console.log('上拉');
			this.list();
		},
		methods: {
			init() {
				this.page = {page: 1, size: 20, more: true, load: true}
				this.movie_list = []
				this.load()
				// console.log(this.page);
			},
			load() {
				if(this.page.load && this.page.more){
					this.page.load = false;
					this.list();
				}
			},
			list() {
				let that = this;
				that.$http.httpReq({url:'api/index/home',token:'',data:{pageSize:that.page.size,pageNumber:that.page.page}})
					.then(res=>{
						// console.log('00',that.route);
						console.log(res);
						let data = res.data.data;
						if(that.page.page <= data.page){ // 小于等于拼接
							that.page.page++;
							that.movie_list = that.movie_list.concat(data.movie_list);
							that.page.more = true;
						}else{ // 大于不处理
							console.log(2);
							that.page.more = false;
						}
						uni.stopPullDownRefresh();
					})
					.catch(err=>{
						console.error(err);
					});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f0f0f0;
	}
	.container{
		// height: 100vh;
		.middle{
			.list{
				padding: 10rpx 20rpx;
				.item{
					margin: 10rpx;
					background-color: #FFFFFF;
					display: flex;
					.icon{
						width: 200rpx;
						height: 200rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.text{
						margin-left: 0rpx;
						padding: 20rpx;
						// line-height: 20rpx;
						font-size: 26rpx;
						display: flex;
						flex-direction: column;
						// align-items: center;
						justify-content: center;
						text{
							width: 450rpx;
							overflow: hidden;
							word-break: break-word;
							text-overflow: ellipsis;
							// display: -webkit-box;
							// -webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							white-space: nowrap;
						}
						.no{
							color: $uni-color-warning;
							font-weight: bold;
							font-size: 40rpx;
						}
						.desc{
							color: $uni-text-color-grey;
							padding: 10rpx 0;
						}
					}
				}
			}
		}
	}
</style>
